<template>
  <div class="vue-dragdrag clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card mb15" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16"><a class="ml5" target="_blank" href="https://github.com/lfyfly/vue-dragdrag">https://github.com/lfyfly/vue-dragdrag</a></span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            npm install vue-dragdrag --save-dev<br>
            <br>
            import vueDragDrag from 'vue-dragdrag'<br>
            Vue.use(vueDragDrag)<br>
            // div指令使用
            &lt;div v-drag&gt;&lt;/div&gt;
          </code>
        </div>
      </el-card>
      <div class="container">
        <div class="inline-block drag-div" v-drag="{ondrag:drag,'cursor':'move'}"></div>
      </div>
      <div class="container mt10">
        <div class="test4" id="test4-move">
          <div class="test4-drag" v-drag="{moveElId:'test4-move'}"></div>
          <div class="test4-content">
            test
          </div>
        </div>
      </div>
      <div class="container mt10">
        <div class="test5" id="test5-move">
          <div class="test5-drag" v-drag="{moveElId:'test5-move'}" v-drag.shaow="{moveElId:'test5-move'}"></div>
          <div class="test5-content">
            test
          </div>
        </div>
      </div>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'VueDragdrag',
  data () {
    return {
      video: {
        sources: [{
          src: 'http://7xkwa7.media1.z0.glb.clouddn.com/sample_video_L',
          type: 'video/mp4'
        }],
        options: {
          autoplay: true,
          volume: 0.6,
          poster: 'http://covteam.u.qiniudn.com/poster.png'
        }
      }
    }
  },
  methods: {
    drag (event, coordinate) {
      console.log(event, coordinate.left, coordinate.top)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-dragdrag{
  margin: 0 auto;
  overflow: hidden;
  .main{
    padding: 10px;
    .container{
      width: 100%;
      height: 100px;
      border: 1px solid #c9c9c9;
      .drag-div{
        width: 30px;
        height: 30px;
        background: #ccc;
      }
      .test4{
        width: 50px;
        height: 50px;
        border:1px solid #4a4a4a;
        .test4-drag{
          height: 20px;
          background: #ccc;
        }
      }
      .test5{
        width: 50px;
        height: 50px;
        border:1px solid #4a4a4a;
        .test5-drag{
          height: 20px;
          background: #ccc;
        }
      }
    }
  }
}
</style>
